fix: make unified filter chip accessible - #62265
Conversation
| </span> | ||
| <span class="text">{{ text }}</span> | ||
| <span class="close-icon" @click="deleteChip"> | ||
| <button |
There was a problem hiding this comment.
We tend to prefer using our own components. If this is a chip, you can use the NcChip component ?
https://nextcloud-vue-components.netlify.app/#/Components/NcChip maybe ?
It already provides a close icon
78cc5e9 to
8041ea3
Compare
|
@skjnldsv Thank you for your comments. |
susnux
left a comment
susnux
left a comment
There was a problem hiding this comment.
code looks good but not tested
|
Ideally you could add a playwright test for this issue :) |
4e68a0c to
9fca0da
Compare
Signed-off-by: Kristian Zendato <kristian.zendato@nextcloud.com>
9fca0da to
fb52362
Compare
|
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! (If you believe you should not receive this message, you can add yourself to the blocklist.) |
3 participants
Summary
The remove control on unified search filter chips was a plain
<span>with a click handler: it was not keyboard-focusable and had no accessible name, so screen reader and keyboard users could not remove an active filter.This changes the control to a real
<button>and adds a translatedaria-label("Remove filter: {text}") so assistive technology announces which filter will be removed. Styles were adjusted so the button keeps the previous visual appearanceChecklist
3. to review, feature component)stable32)AI (if applicable)